import { Authenticator, Button } from '@aws-amplify/ui-react';

import { Example } from '@/components/Example';
import { Accordion, Text } from '@aws-amplify/ui-react';

import { LabelsAndTextDemo } from './LabelsAndTextDemo';

Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components:

<Accordion.Container defaultValue="default-values">
  <Accordion.Item value="default-values">
    <Accordion.Trigger>
      <Text fontWeight="bold">Default Values</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      Compare the default labels here to those in the customized screens below.

      Because `I18n` manages global translations, customizing these will affect all translations of these strings (including those on this page!).

      <Example>
        <Authenticator />
      </Example>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="sign-in">
    <Accordion.Trigger>
      <Text fontWeight="bold">Sign In</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```js
      I18n.putVocabulariesForLanguage('en', {
        'Sign In': 'Login', // Tab header
        'Sign in': 'Log in', // Button label
        'Sign in to your account': 'Welcome Back!',
        Username: 'Enter your username', // Username label
        Password: 'Enter your password', // Password label
        'Forgot your password?': 'Reset Password',
      });
      ```

      <Example>
        <LabelsAndTextDemo Component={<Authenticator initialState="signIn"/>} />
      </Example>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="sign-up">
    <Accordion.Trigger>
      <Text fontWeight="bold">Sign Up</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```js
      I18n.putVocabulariesForLanguage('en', {
        'Create Account': 'Register', // Tab header
        'Create a new account': 'New User', // Header text
        'Confirm Password': 'Confirm your password', // Confirm Password label
        Email: 'Enter your email',
        'Phone Number': 'Enter your phone number',
      });
      ```

      <Example>
        <LabelsAndTextDemo Component={<Authenticator initialState="signUp"/>} />
      </Example>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="confirm-sign-in">
    <Accordion.Trigger>
      <Text fontWeight="bold">Confirm Sign In</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
    ```ts
    I18n.putVocabulariesForLanguage('en', {
      'Confirm SMS Code': 'SMS',
      'Confirm TOTP Code': 'TOTP',
      'Confirm Email Code': 'Email',
      'Confirm MFA Code': 'Default',
    });
    ```
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="forgot-password">
    <Accordion.Trigger>
      <Text fontWeight="bold">Forgot Password</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```js
      I18n.putVocabulariesForLanguage('en', {
        'Reset your password': 'Forgot your password?',
        'Enter your username': 'Username or Email',
        'Send code': 'Reset my password',
        'Back to Sign In': 'Back to Login',
      });
      ```

      <Example>
        <LabelsAndTextDemo Component={<Authenticator initialState="forgotPassword"/>} />
      </Example>
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="setup-totp">
    <Accordion.Trigger>
      <Text fontWeight="bold">Setup TOTP</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```js
      I18n.putVocabulariesForLanguage('en', {
        Loading: 'QR code would show here',
        Code: '2FA Code',
        Confirm: 'Confirm 2FA',
        'Back to Sign In': 'Back to Login',
      });
      ```
    </Accordion.Content>
  </Accordion.Item>
  
  <Accordion.Item value="select-mfa-type">
    <Accordion.Trigger>
      <Text fontWeight="bold">Select MFA Type</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```ts
      I18n.putVocabulariesForLanguage('en', {
        'Multi-Factor Authentication Setup': 'MFA Setup', // MFA Setup Selection Header
        'Multi-Factor Authentication': 'MFA', // MFA Selection Header
        'Select MFA Type': "Choose an MFA Type", // Radio Group Legend
        'Email Message': 'Email', // Email Radio Option Label
        'Text Message (SMS)': 'SMS', // SMS Radio Option Label
        'Authenticator App (TOTP)': 'TOTP', // TOTP Radio Option Label
      });
      ```
    </Accordion.Content>
  </Accordion.Item>

  <Accordion.Item value="setup-email">
    <Accordion.Trigger>
      <Text fontWeight="bold">Setup Email</Text>
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      ```ts
      I18n.putVocabulariesForLanguage('en', {
        'Setup Email': 'Email Setup' // Setup Email Header
      });
      ```
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Container>
